* {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    height: 100vh;
    background: linear-gradient(200deg,#0b6a91,#5afcfd);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   /* background-image: url(../img/img/BG.jpg); */
    background-repeat: no-repeat;
    background-size: cover;
}

/* 动画效果 */
ul li{
    position: absolute;
    border: 1px solid #fff;
    background-color: #fff;
    width: 30px;
    height: 30px;
    list-style: none;
    opacity: 0;
}
.square li{
    top: 40vh;
    left: 60vw;
    /* 执行动画：动画名 时长 线性的 无限次播放 */
    animation: square 10s linear infinite;
}
.square li:nth-child(2){
    top: 80vh;
    left: 10vw;
    /* 设置动画延迟时间 */
    animation-delay: 2s;
}
.square li:nth-child(3){
    top: 80vh;
    left: 85vw;
    /* 设置动画延迟时间 */
    animation-delay: 4s;
}
.square li:nth-child(4){
    top: 10vh;
    left: 70vw;
    /* 设置动画延迟时间 */
    animation-delay: 6s;
}
.square li:nth-child(5){
    top: 10vh;
    left: 10vw;
    /* 设置动画延迟时间 */
    animation-delay: 8s;
}
.circle li{
    bottom: 0;
    left: 15vw;
    /* 执行动画 */
    animation: circle 10s linear infinite;
}
.circle li:nth-child(2){
    left: 35vw;
    /* 设置动画延迟时间 */
    animation-delay: 2s;
}
.circle li:nth-child(3){
    left: 55vw;
    /* 设置动画延迟时间 */
    animation-delay: 6s;
}
.circle li:nth-child(4){
    left: 75vw;
    /* 设置动画延迟时间 */
    animation-delay: 4s;
}
.circle li:nth-child(5){
    left: 90vw;
    /* 设置动画延迟时间 */
    animation-delay: 8s;
}

/* 定义动画 */
@keyframes square {
    0%{
        transform: scale(0) rotateY(0deg);
        opacity: 1;
    }
    100%{
        transform: scale(5) rotateY(1000deg);
        opacity: 0;
    }
}
@keyframes circle {
    0%{
        transform: scale(0) rotateY(0deg);
        opacity: 1;
        bottom: 0;
        border-radius: 0;
    }
    100%{
        transform: scale(5) rotateY(1000deg);
        opacity: 0;
        bottom: 90vh;
        border-radius: 50%;
    }
}


.title {
    font-size: 40px;
    font-weight: 900;
    margin: 20px 0;
}

.title span:nth-child(1) {
    color: #bf8040;
}

.title span:nth-child(2) {
    color: #bfbf40;
}

.title span:nth-child(3) {
    color: #80bf40;
}

.title span:nth-child(4) {
    color: #40bf40;
}

.title span:nth-child(5) {
    color: #40bf80;
}

.title span:nth-child(6) {
    color: #40bfbf;
}

.title span:nth-child(7) {
    color: #4080bf;
}

.title span:nth-child(8) {
    color: #4040bf;
}

.title span:nth-child(9) {
    color: #8040bf;
}

.title span:nth-child(10) {
    color: #bf40bf;
}

.title span:nth-child(11) {
    color: #bf4080;
}

.return {
    width: 50px;
    height: 25px;
    background: url(../img/running/go_home.png) no-repeat center center/100% 100%;
    border: none;
}

.return:hover {
    width: 55px;
    height: 30px;
}